<template>
  <view class="my-container">
    <!-- 顶部橙色背景区域 -->
    <view class="header">
      <view class="edit-btn" @click="editProfile">编辑</view>
      <view class="avatar-container">
        <image
          v-if="userInfo.avatarUrl"
          class="avatar"
          :src="userInfo.avatarUrl"
        ></image>
        <image v-else src="./../../static/img/user.jpg" class="avatar"></image>
      </view>
      <view class="verify-icon" v-if="userInfo.workNumber">
        <image src="../../static/img/verify-icon.png"></image>
      </view>
      <view class="username">
        你好，{{ userInfo.username || "亲爱的用户" }}
      </view>
      <view class="signature" v-show="false">{{ userInfo.signature }}</view>
    </view>
    <!-- 数据统计区域 -->
    <view class="stats-container" v-if="false">
      <view class="stat-item">
        <view class="stat-number">{{ userInfo.followCount }}</view>
        <view class="stat-label">关注</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ userInfo.fanCount }}</view>
        <view class="stat-label">粉丝</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ userInfo.likeCount }}</view>
        <view class="stat-label">获赞</view>
      </view>
    </view>
    <view class="info-content">
      <view class="info-item">
        <view class="info-label">姓名</view>
        <view class="info-value"> {{ userInfo.username }}</view>
      </view>
      <view class="info-item">
        <view class="info-label">工号</view>
        <view class="info-value">{{ userInfo.workNumber }}</view>
      </view>
      <view class="info-item">
        <view class="info-label">手机号</view>
        <view class="info-value"> {{ userInfo.phoneNumber }} </view>
      </view>
      <view class="info-item">
        <view class="info-label">车牌号</view>
        <view class="info-value"> {{ userInfo.licensePlateNumber }}</view>
      </view>
      <view class="info-item">
        <view class="info-label">当前折扣价</view>
        <view class="info-value"> {{ currentPriceType }} </view>
      </view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script setup>
import { reactive, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getUserInfo } from "@/utils/api/user.js";
import useUserStore from "@/store/user.js";

const userStore = useUserStore();

const currentPriceType = computed(() => {
  if (userInfo.roleId === 2) {
    return "内部员工价";
  }
  if (userInfo.roleId === 1) {
    return "VIP";
  }
  return "普通用户";
});
const editProfile = () => {
  // 这里实现编辑个人资料逻辑
  uni.navigateTo({
    url: `/pages/my/info`,
  });
};
const userInfo = reactive({
  // 头像地址，需替换为真实地址
  avatarUrl: "",
  username: "",
});
const fetchUserInfo = async () => {
  try {
    const res = await getUserInfo({ openId: userStore.openid });
    console.log("res:", res);
    Object.assign(userInfo, res);
  } catch (error) {
    console.error("获取用户信息失败", error);
  }
};
onShow(() => {
  fetchUserInfo();
});
</script>

<style scoped lang="scss">
.my-container {
  min-height: 100vh;
  height: 100vh;
  background-color: rgb(238, 240, 246);
}
.header {
  background-color: #0aa671;
  padding: 60px 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.edit-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  color: #fff;
  font-size: 32rpx;
}
.avatar-container {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* margin-top: 30rpx; */
}
.avatar-container image {
  width: 100%;
  height: 100%;
}
.verify-icon {
  position: absolute;
  z-index: 9;
  top: 125px;
  left: 208px;
  width: 30px;
  height: 30px;
}
.verify-icon image {
  width: 100%;
  height: 100%;
}
.username {
  color: #fff;
  font-size: 50rpx;
  margin-top: 20px;
}
.signature {
  color: #fff;
  font-size: 32rpx;
  margin-top: 10rpx;
}
.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  font-size: 40rpx;
  font-weight: bold;
}
.stat-label {
  font-size: 32rpx;
  margin-top: 10rpx;
}
.info-content {
  background-color: #fff;
  margin: 20px;
  padding: 0 16px 10px;

  border-radius: 8px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
}
</style>
